<template>
	<view class="wanl-order-list u-flex-col">
		<!--        <view class="navbar">
            <view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state"
                :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
                {{ item.text }}({{item.count}})
            </view>
        </view> -->
		<view>
			<view class="padding-bj">
				<u-search></u-search>
			</view>
			<!-- <goods-tabs :list="navTitleList" :is-scroll="true" v-model="tabCurrentIndex" name="text_show"></goods-tabs> -->
		</view>

		<swiper :current="tabCurrentIndex" style="flex: 1;" duration="300" @change="changeTab">
			<swiper-item class="tab-content u-p-t-16" v-for="(tag, key) in navList" :key="tag.state">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty text="没有找到任何商品" v-if="tag.loaded === true && tag.list.length === 0" />
					<!-- 订单列表 -->
					<block v-if="tag.list.length > 0">
						<view class="" v-for="(item, index) in tag.list" :key="index">
							<!-- 商品选择 -->
							<view class="info padding-bj u-border-bottom u-flex white-bg" style="align-items: stretch;">
								<view class="avatar">
									<image :src="$wanlshop.oss(item.avatar)" mode="aspectFill" class="avatar">
									</image>
								</view>
								<view class="detail u-m-l-16 u-flex-1 u-flex">
									<view class="u-flex-1">
										<view class="u-flex">
											<view class="nickname">{{ item.nickname }} nickname </view>
											<view class="tips u-m-l-8">订单未完成</view>
										</view>
										<view class="level">{{ item.memo }}</view>
										<view class="time">{{ item.createtime_text }}</view>
									</view>
									<view class="price">+{{ item.money }}</view>
								</view>
							</view>
						</view>
					</block>
					<uni-load-more :status="tag.loadingType" :content-text="contentText" />
					<view class="edgeInsetBottom"></view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<view v-if="false">
			<view class="wanl-cart-foot" style="background: #F7F7F7;;"></view>
			<view class="wanl-cart-foot fixedView solid-top account u-flex u-row-right"
				style="justify-content: flex-end;">
				<button class="cu-btn round bg-gradual-orange">去结算</button>
				<button class="cu-btn round bg-gradual-orange">去结算</button>
				<button class="cu-btn round bg-gradual-orange">去结算</button>
			</view>
		</view>

		<view v-show="false">{{ ts }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '普通用户',
						text_show: '普通用户',
						key: 1,
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 1,
						text: '工匠',
						text_show: '工匠',
						key: 2,
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 2,
						text: '服务商',
						text_show: '服务商',
						key: 5,
						loadingType: 'more',
						current_page: 1,
						list: []
					}
					// ,{
					// 	state: 7,
					// 	text: '已关闭',
					// 	loadingType: 'more',
					// 	current_page: 1,
					// 	orderList: []
					// }
				],

				navTitleList: [{
						state: 0,
						text: '普通用户',
						text_show: '普通用户',
						key: 1,
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 1,
						text: '工匠',
						text_show: '工匠',
						key: 2,
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 2,
						text: '服务商',
						text_show: '服务商',
						key: 5,
						loadingType: 'more',
						current_page: 1,
						list: []
					}
					// ,{
					// 	state: 7,
					// 	text: '已关闭',
					// 	loadingType: 'more',
					// 	current_page: 1,
					// 	orderList: []
					// }
				],
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: ''
				},
				cart: {
					status: 0,
					allsum: 0,
				},
				chooseList: [],
				ts: 0,
				customer_id: 0
			};
		},
		onLoad(options) {
			if (options.customer_id) {
				this.customer_id = options.customer_id
			}
			uni.setNavigationBarTitle({
				title: options.title
			})
			this.$api.get({
				url: '/store/customer/detail',
				data: {
					id: this.customer_id
				},
				success: res => {
					this.loadData('tabChange');

				}
			});

		},
		onShow() {},
		methods: {
			//获取订单列表
			loadData(source) {
				console.log('loadData');
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				let status = navItem.key
				//判断是否最后一页
				if (navItem.loadingType == 'noMore') {
					return;
				}
				//tab切换只有第一次需要加载数据
				if (source === 'tabChange' && navItem.loaded === true) {
					return;
				}
				//防止重复加载
				if (navItem.loadingType === 'loading') {
					return;
				}
				navItem.loadingType = 'loading';
				// 获取列表
				this.$api.get({
					url: '/store/customer/detail',
					data: {
						level: status,
						page: navItem.current_page,
						id: this.customer_id
					},
					success: res => {
						// this.navList.forEach(item => {
						//     item.count = res[item.key + "_count"];
						//     item.text_show = `${item.text}(${item.count})`
						// })
						navItem.current_page = res.current_page; //当前页码
						if (res.last_page === res.current_page) {
							navItem.loadingType = 'noMore';
						} else {
							navItem.loadingType = 'more';
							navItem.current_page++;
						}
						console.log(res)
						let orderList = res.data;
						orderList.forEach(item => {
							navItem.list.push(item);
						});
						console.log(navItem)
						console.log('list')
						//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
						this.$set(navItem, 'loaded', true);
					}
				});
			},

			//swiper 切换
			changeTab(e) {
				this.chooseList = [];
				this.tabCurrentIndex = e.detail.current
				let tabIndex = this.tabCurrentIndex;
				let navItem = this.navList[tabIndex];
				let list = navItem.list;
				list.forEach(item => {
					item.checked = false;
				})

				console.log(e)


				// 获取列表
				this.$api.get({
					url: '/store/product/productList',
					data: {},
					success: res => {
						// this.navTitleList.forEach(item => {
						//     item.count = res[item.key + "_count"];
						//     item.text_show = `${item.text}(${item.count})`
						// })
						// this.tabCurrentIndex = e.target.current;
						this.loadData('tabChange');

					}
				});




			},
			//顶部tab点击
			tabClick(index) {
				this.chooseList = [];
				let tabIndex = this.tabCurrentIndex;
				let navItem = this.navList[tabIndex];
				let list = navItem.list;
				list.forEach(item => {
					item.checked = false;
				})

				this.tabCurrentIndex = index;

				console.log('method')

			},
			//删除订单
			deleteOrder(order_id, key) {
				uni.showLoading({
					title: '请稍后'
				});
				this.$api.post({
					url: '/wanlshop/order/delOrder',
					data: {
						id: order_id
					},
					success: res => {
						this.navList[this.tabCurrentIndex].orderList.splice(key, 1);
						uni.hideLoading();
					}
				});
			},
			//取消订单- 设置为7 -全局
			cancelOrder(item) {
				uni.showLoading({
					title: '请稍后'
				});
				// 获取列表
				this.$api.post({
					url: '/wanlshop/order/cancelOrder',
					data: {
						id: item.id
					},
					success: res => {
						let {
							stateTip,
							stateTipColor
						} = this.orderStateExp(7);
						item = Object.assign(item, {
							state: 7,
							stateTip,
							stateTipColor
						});
						this.$store.commit('statistics/order', {
							pay: this.$store.state.statistics.order.pay - 1,
							whole: this.$store.state.statistics.order.whole - 1
						});
						// 取消订单后删除待付款中该项，并修改全部中的状态 1.0.2升级
						let list = this.navList[1].orderList;
						let index = list.findIndex(val => val.id === item.id);
						index !== -1 && list.splice(index, 1);
						// 删除后修改全部中的为7
						if (this.tabCurrentIndex == 1) {
							let list = this.navList[0].orderList;
							let index = list.findIndex(val => val.id === item.id);
							if (index !== -1) {
								list[index].state = 7;
							}
						}
						uni.hideLoading();
					}
				});
			},
			commentOrder(id) {
				this.$wanlshop.to('/pages/user/order/comment?order_id=' + id);
			},
			//支付订单
			paymentOrder(id) {
				this.$wanlshop.to(`/pages/user/money/pay?order_id=${id}&order_type=goods`);
			},
			//确认收货- 全局
			confirmOrder(item) {
				uni.showLoading({
					title: '请稍后'
				});
				// 获取列表
				this.$api.post({
					url: '/wanlshop/order/confirmOrder',
					data: {
						id: item.id
					},
					success: res => {
						let {
							stateTip,
							stateTipColor
						} = this.orderStateExp(4);
						item = Object.assign(item, {
							state: 4,
							stateTip,
							stateTipColor
						});
						this.$store.commit('statistics/order', {
							receiving: this.$store.state.statistics.order.receiving - 1,
							evaluate: this.$store.state.statistics.order.evaluate + 1
						});
						uni.hideLoading();
					}
				});
			},
			//订单状态文字和颜色
			orderStateExp(state) {
				let stateTip = '',
					stateTipColor = '#333';
				switch (+state) {
					case 1:
						stateTip = '等待支付';
						stateTipColor = '#f40';
						break;
					case 2:
						stateTip = '等待卖家发货';
						break;
					case 3:
						stateTip = '卖家已发货';
						break;
					case 4:
						stateTip = '交易成功';
						break;
					case 5:
						stateTip = '交易成功';
						break;
					case 6:
						stateTip = '已完成';
						break;
					case 7:
						stateTip = '订单已关闭';
						stateTipColor = '#777';
						break;
					case 8:
						stateTip = '商家已接单';
						break;
					case 9:
						stateTip = '已到达自提点';
						break;
						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			},
			getRefund(status) {
				return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
			},
			// 修改地址
			editAddress(id) {
				this.$wanlshop.to('/pages/user/address/address?source=2&order_id=' + id);
			},
			//添加或修改成功之后回调
			async refreshList(address_id, order_id) {
				uni.showLoading({
					title: '正在提交新地址'
				});
				// 获取列表
				this.$api.post({
					url: '/wanlshop/order/editOrderAddress',
					data: {
						id: order_id,
						address_id: address_id
					},
					success: res => {
						this.$wanlshop.msg('地址修改成功');
						uni.hideLoading();
					}
				});
			},
			choose(goods, index) {
				console.log(goods, index)
				let tabIndex = this.tabCurrentIndex;
				let navItem = this.navList[tabIndex];
				console.log(navItem.list)
				let list = navItem.list;
				let isChecked = list[index].checked ?? false;
				list[index].checked = !isChecked;
				if (list[index].checked) {
					this.chooseList.push(goods.id)
				} else {
					this.chooseList.splice(this.chooseList.indexOf(goods.id, 1))
				}

				console.log(this.chooseList)
				this.ts = (new Date()).getTime();
			},
			normal_a(goods, index) {
				console.log(goods, index)
				this.$api.post({
					url: '/store/product/edit',
					data: {
						ids: [goods.id],
						status: 'normal'
					},
					success: res => {
						console.log(res)
						this.$wanlshop.msg('提交成功')
						setTimeout(() => {
							this.remove_from_list(index)
						}, 1400)
					}
				});

			},
			hidden_a(goods, index) {
				console.log(goods, index)
				this.$api.get({
					url: '/store/product/edit',
					data: {
						ids: [goods.id],
						status: 'hidden'
					},
					success: res => {
						this.$wanlshop.msg('商品已下架')
						setTimeout(() => {
							this.remove_from_list(index)
						}, 1400)
					}
				});
			},
			remove_a(goods, index) {
				console.log(goods, index)
				this.$api.get({
					url: '/store/product/del',
					data: {
						ids: [goods.id],
					},
					success: res => {
						this.$wanlshop.msg('商品已删除')
						setTimeout(() => {
							this.remove_from_list(index)
						}, 1400)
					}
				});
			},
			remove_from_list(index) {
				let tabIndex = this.tabCurrentIndex;
				let navItem = this.navList[tabIndex];
				navItem.list.splice(index, 1)
			},
			go_list(item) {
				console.log(item)
				uni.navigateTo({
					url: `list/list?customer_id=${item.id}`
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/all.scss";

	page {
		height: 100%;
	}

	.wanl-cart-foot {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 997;
		min-height: 52px;
		background-color: #ffffff;
		padding: 0 12px;
	}

	.wanl-cart-goods {
		background-color: #ffffff;

		.picture {
			width: 180rpx;
			height: 180rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.content {
			.title {
				font-size: 24rpx;
			}

			.price {
				font-size: 24rpx;

				.value {
					font-size: 32rpx;
				}
			}
		}
	}

	.wanl-cart-foot {
		.cu-btn:not(:nth-child(1)) {
			margin-left: 16rpx;
		}
	}

	.info {
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 100rpx;
			border: 2rpx solid #000000;
		}


		.detail {
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;

			.nickname {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}

			.tips {
				font-weight: 500;
				font-size: 24rpx;
				color: #06A7FF;
			}

			.price {
				font-weight: 500;
				font-size: 40rpx;
				color: #FF4900;

				&.not {
					color: #999999;
				}
			}
		}
	}
</style>